<template>
	<view>
		<Navbar></Navbar>

		<view class="u-m-20">
			<u-swiper :list="goodsData.info.head_image" height="700" img-mode="aspectFill"></u-swiper>
			<view class="u-m-t-20 u-p-25 u-form-box">
				<view class="u-flex u-row-between">
					<view class="u-flex-1 u-font-38 u-font-bold">{{ goodsData.info.name }}</view>
					<view class="u-flex shareBox" @click="shareShow = true">
						<u-icon name="zhuanfa" color="#fff"></u-icon>
						<view class="u-font-26 u-m-l-5">分享</view>
					</view>
				</view>
				<view class="u-color-gray u-m-t-5">{{ goodsData.info.des }}</view>
				<view class="u-m-t-10">
					<span class="u-m-r-10 u-color-red u-font-bold"
						style="font-size: 30px;">{{ goodsData.info.proportion_vip_price}}积分</span>
				</view>
			</view>
		</view>
		<view class="u-m-t-30 u-m-20">
			<view class="u-flex u-p-t-20 u-p-b-20 u-color-gray">
				<hr class="u-flex-1 desline">
				</hr>
				<view class="u-m-l-20 u-m-r-20">商品详情</view>
				<view class="u-flex-1 desline"></view>
			</view>
			<!-- <rich-text :nodes="goodsData.info.describe"></rich-text> -->
			
			<u-parse class="u-radius-20" :html="goodsData.info.describe" :selectable="true" :tag-style="style" :lazy-load="true"></u-parse>
		</view>
		<view class="u-m-20 u-m-t-30" v-if="recommendList[0]">
			<view class="u-m-t-20 u-p-25 u-form-box">
				<view class="u-m-b-20 u-font-34 u-font-bold">推荐商品</view>
				<scroll-view scroll-x="true" style="height: 340rpx;">
					<view class="recommendItem" v-for="item in recommendList" :key="item.id">
						<view class="content">
							<view>
								<u-image width="100%" height="200rpx" :src="item.head_image[0]"></u-image>
								<view class="u-m-t-15">{{ item.name }}</view>
							</view>
							<view class="u-flex u-row-between">
								<view class="u-color-red u-font-bold">
									<span class="u-font-24">¥</span>
									<span class="u-font-32">{{ item.vip_price }}</span>
								</view>
								<view class="u-relative" @click.native.stop="onAddCart(item)">
									<u-icon name="plus-circle-fill" color="#B3723E" size="52"></u-icon>
									<view class="num" v-if="item.num > 0">{{item.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view style="height: 200rpx;"></view>

		<view class="shop_bottom">
			<view class="shop_box">
				<view></view>
				<view class="car" @click="cartPopupData.show = true">
					<u-icon name="shopping-cart" color="#fff" size="68"></u-icon>
					<view class="num" v-if="cartPopupData.num > 0">{{ cartPopupData.num }}</view>
				</view>
				<view class="button" @click="onAddCart(goodsData.info)">加入购物车</view>
				<view class="pay" @click="onPay()">立即兑换</view>
			</view>
		</view>

		<!-- 数量选择 -->
		<u-popup mode="bottom" border-radius="20" v-model="numberPopupData.show">
			<view class="number">
				<view class="numberGoods">
					<view class="u-flex u-col-top">
						<image :src="goodsData.info.head_image[0]"></image>
						<view class="u-m-l-20">
							<view class="u-font-28 u-font-bold">{{goodsData.info.name}}</view>
							<view class="u-m-t-15">
								<span class="u-font-bold u-font-36 u-color-red">{{goodsData.info.proportion_vip_price}}积分</span>
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between u-back-white u-p-25 u-radius-20 u-p-t-25 u-p-b-25">
					<view>购买数量</view>
					<view>
						<u-number-box v-model="numberPopupData.num" @minus="onReductNumber()"
							@plus="onAddNumber()"></u-number-box>
					</view>
				</view>
				<view class="button" @click="onNumberOperate()" v-if="numberPopupData.type == 1">加入购物车</view>
				<view class="pay" @click="onNumberOperate()" v-else>立即兑换</view>
			</view>
		</u-popup>

		<!-- 购物车弹出窗 -->
		<u-popup mode="bottom" border-radius="20" height="800" v-model="cartPopupData.show">
			<view class="cart">
				<view class="u-flex u-row-between u-color-puce u-m-b-20">
					<view class="u-font-34 u-font-bold">购物车</view>
					<view class="u-flex" @click="onClearCart()">
						<u-icon name="shanchu" custom-prefix="custom-icon" size="40" color="#B3723E"></u-icon>
						<view class="u-m-l-15">清空</view>
					</view>
				</view>
				<view class="goods">
					<scroll-view scroll-y="true" class="u-height-100">
						<view class="goods_item" v-for="cartItem in cartPopupData.list" :key="cartItem.id">
							<image :src="cartItem.goods.head_image[0]"></image>
							<view class="u-flex-1 u-m-l-20 u-flex-col u-row-between" style="height: 150rpx">
								<view>
									<view class="u-font-30 u-font-bold">{{cartItem.goods.name}}</view>
									<view class="u-font-24 u-color-lightGray u-m-t-5 u-ellipsis">{{cartItem.goods.des}}
									</view>
								</view>
								<view class="u-flex u-row-between">
									<view>
										<span
											class="u-font-bold u-font-32 u-color-red">{{cartItem.goods.proportion_vip_price}}积分</span>
									</view>
									<view class="u-relative">
										<u-number-box v-model="cartItem.num" :min="1" @minus="onReductCart(cartItem.goods)"
											@plus="onAddCart(cartItem.goods)"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="pay" @click="onSwitchPay()">去兑换</view>
			</view>
		</u-popup>

		<!-- 分享 -->
		<Share :isShowShare="shareShow" @closeShare="shareShow = false"></Share>

		<!-- 通用提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" @confirm="modalConfirm" @cancel="modalCancel"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Share from '@/components/Share.vue'
	import Modal from '@/components/Modal.vue'
	import share from '@/mixins/share.js'
	import {
		teaGoodsInfo,
		teaCartList,
		teaGoodsList,
		teaCartClear,
		teaCartReduce,
		teaCartAdd
	} from '@/network/tea.js'
	import {
		formatContent
	} from '@/utils/index.js'
	export default {
		mixins: [share],
		components: {
			Navbar,
			Share,
			Modal
		},
		data() {
			return {
				goodsId: 0,
				userId: uni.getStorageSync("user_id"),
				goodsData: {},
				cartPopupData: {
					show: false,
					price: 0,
					num: 0,
					list: []
				},
				numberPopupData: {
					show: false,
					num: 1,
					type: 1 // 1 购物车  2 结算
				},
				shareShow: false,
				recommendList: [],
				modal: {
					show: false,
					showCancel: false,
					confirm: '申请',
					cancel: '取消',
					content: ''
				},
				style: {
					div: 'padding: 0 !important',
					video: 'width: 100%'
				},
				isPresident: false // 是否是青创私董
			}
		},
		onLoad(options) {
			this.goodsId = options.id
			this.onGetGoodsInfo()
			this.onGetRecommendGoods()
			if(Number(uni.getStorageSync("president_status"))>=5){
				this.isPresident = true
			}
			setTimeout(() => {
				this.onGetUserCartList()
			}, 200)
		},
		methods: {
			async onGetGoodsInfo() {
				const params = {
					user_id: this.userId,
					goods_id: this.goodsId
				}
				const res = await teaGoodsInfo(params)
				this.mixinsShare.title = res.data.info.name
				this.mixinsShare.des = res.data.info.des
				this.mixinsShare.image = res.data.info.head_image[0]
				this.mixinsShare.page =
					`/teaBureau/teaGoodsDetail/teaGoodsDetail?id=${res.data.info.id}&inviterId=${this.userId}`
				res.data.info.describe = formatContent(res.data.info.describe)
				this.goodsData = res.data
			},
			async onGetUserCartList() {
				const res = await teaCartList({
					user_id: this.userId,
					position: 1
				})
				this.cartPopupData.list = res.data
				/* 计算数量 */
				let num = 0
				res.data.map(item => {
					this.recommendList.map(recoItem => {
						if (item.goods_id == recoItem.id) {
							recoItem.num = item.num
						}
					})
					num += item.num
				})
				this.cartPopupData.num = num
				/* 同步数量 */
			},
			async onGetRecommendGoods() {
				const params = {
					recommend: this.goodsId,
					page: 1,
					limit: 10
				}
				const res = await teaGoodsList(params)
				this.recommendList = res.data.list
			},
			/* 清空购物车 */
			async onClearCart() {
				const res = await teaCartClear({
					user_id: this.userId,
					position: 1
				})
				this.onGetUserCartList()
				this.cartPopupData.show = false
			},
			/* 添加购物车 */
			async onAddCart(val) {
				/* const params = {
					user_id: this.userId,
					goods_id: val.id,
					num: 1,
					sku_id: ''
				}
				const res = await teaCartAdd(params)
				this.onGetUserCartList()
				this.modal.content = '已添加至购物车'
				this.modal.cancel = '继续购物'
				this.modal.confirm = '去结算'
				this.modal.showCancel = true
				this.modal.show = true */
				this.numberPopupData.num = 1
				this.numberPopupData.type = 1
				this.numberPopupData.show = true
			},
			/* 申请青创私董 */
			onApplyPresident(){
				uni.navigateTo({
					url: "/teaBureau/teaAgreement/teaAgreement"
				})
			},
			modalCancel() {
				this.modal.show = false
			},
			modalConfirm() {
				this.modal.show = false
				uni.navigateTo({
					url: "/pages/scoreGoodsOrder/scoreGoodsOrder"
				})
			},
			/* 减少购物车 */
			async onReductCart(val) {
				const params = {
					user_id: this.userId,
					goods_id: val.id,
					num: 1,
					sku_id: '',
					position: 1
				}
				const res = await teaCartReduce(params)
				this.onGetUserCartList()
			},
			/* 去结算 */
			async onPay() {
				/* const params = {
					user_id: this.userId,
					goods_id: this.goodsData.info.id,
					num: 1,
					sku_id: ''
				}
				const res = await teaCartAdd(params)
				uni.navigateTo({
					url: "/teaBureau/teaPointOrder/teaPointOrder?id=" + this.goodsData.info.id
				}) */
				this.numberPopupData.num = 1
				this.numberPopupData.type = 2
				this.numberPopupData.show = true
			},
			// 数量弹出减少
			onReductNumber(){
				if(this.numberPopupData.num == 1){
					return
				}else{
					this.numberPopupData.num--
				}
			},
			// 数量弹出增加
			onAddNumber(){
				this.numberPopupData.num++
			},
			// 数量弹出操作
			async onNumberOperate(){
				switch(this.numberPopupData.type){
					case 1:
					    const cartData = {
							user_id: this.userId,
							goods_id: this.goodsData.info.id,
							num: this.numberPopupData.num,
							sku_id: '',
							position: 1
						}
						const res = await teaCartAdd(cartData)
						this.onGetUserCartList()
					    break;
					case 2:
					    const params = {
							id: this.goodsData.info.id,
							num: this.numberPopupData.num
						}
						uni.navigateTo({
							url: "/pages/scoreGoodsOrder/scoreGoodsOrder?data=" + JSON.stringify(params)
						})
					    break;
				}
				this.numberPopupData.show = false
			},
			/* 跳转订单确认 */
			onSwitchPay() {
				uni.navigateTo({
					url: "/pages/scoreGoodsOrder/scoreGoodsOrder"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.desline {
		border-bottom: 1rpx solid #ccc;
	}

	.shop_bottom {
		position: fixed;
		z-index: 999;
		background: #fff;
		padding: 24rpx 24rpx 48rpx 24rpx;
		width: 100%;
		bottom: 0;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.2);

		.shop_box {
			position: relative;
			display: flex;
			justify-content: flex-end;

			.car {
				position: absolute;
				top: -40rpx;
				left: 0;
				background: #B3723E;
				display: flex;
				padding: 20rpx;
				border-radius: 50rpx;

				.num {
					position: absolute;
					right: -8rpx;
					top: -10rpx;
					background: #fff;
					border: 1rpx solid #B3723E;
					padding: 2rpx 10rpx;
					border-radius: 50rpx;
					font-size: 24rpx;
					color: #B3723E;
					font-weight: bold;
				}
			}

			.button {
				background: #B3723E;
				color: #fff;
				padding: 20rpx 60rpx;
				font-size: 30rpx;
				margin-left: 20rpx;
				border-radius: 50rpx;
			}

			.pay {
				background: #F84D3F;
				color: #fff;
				padding: 20rpx 60rpx;
				font-size: 30rpx;
				margin-left: 20rpx;
				border-radius: 50rpx;
			}
		}
	}

	.cart {
		padding: 30rpx 30rpx 50rpx 30rpx;
		display: flex;
		flex-direction: column;
		height: 100%;

		.goods {
			flex: 1;
			overflow-y: auto;
		}

		.button {
			background: #B3723E;
			color: #fff;
			padding: 20rpx 0;
			font-size: 30rpx;
			text-align: center;
			border-radius: 50rpx;
			margin-top: 30rpx;
		}
		
		.pay{
			background: #ee2424;
			color: #fff;
			padding: 20rpx 0;
			font-size: 30rpx;
			text-align: center;
			border-radius: 50rpx;
			margin-top: 30rpx;
		}

		.goods_item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

			.num {
				position: absolute;
				right: -6rpx;
				top: -10rpx;
				background: #ee2424;
				color: #fff;
				padding: 4rpx 8rpx;
				font-size: 16rpx;
				border-radius: 50rpx;
				border: 1rpx solid #fff;
			}

			.drawerIcon {
				opacity: 0.4;
			}

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
		}
	}

	.number {
		padding: 25rpx 25rpx 50rpx 25rpx;
		background: #eee;

		.numberGoods {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			background: #fff;
			padding: 20rpx;
			border-radius: 20rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
		}

		.button {
			background: #B3723E;
			color: #fff;
			padding: 20rpx 0;
			font-size: 30rpx;
			text-align: center;
			border-radius: 50rpx;
			margin-top: 30rpx;
		}
		
		.pay{
			background: #ee2424;
			color: #fff;
			padding: 20rpx 0;
			font-size: 30rpx;
			text-align: center;
			border-radius: 50rpx;
			margin-top: 30rpx;
		}
	}

	.shareBox {
		background: #E6BF91;
		color: #fff;
		padding: 8rpx 16rpx;
		border-radius: 50rpx;
	}

	.num {
		position: absolute;
		right: -6rpx;
		top: -10rpx;
		background: #ee2424;
		color: #fff;
		padding: 4rpx 8rpx;
		font-size: 16rpx;
		border-radius: 50rpx;
		border: 1rpx solid #fff;
	}

	scroll-view {
		white-space: nowrap;
		display: flex;
		flex-direction: row;
	}

	.recommendItem {
		width: 240rpx;
		height: 100%;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		margin-right: 25rpx;
		display: inline-block;
		padding: 15rpx;

		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>